<template>
  <a-spin :spinning="spinning" tip="加载中...">
    <!--  :defaultValue="resourceNameArr"  :value="resourceIdArr"  form.resourceIdArr-->
    <a-select
      :show-search="openSearch"
      :mode="typeMode == 'multiple' ? 'multiple' : ''"
      :placeholder="placeholder"
      @popupScroll="popupScroll"
      @change="change"
      optionFilterProp="children"
      v-model="resourceNameArr"
      :defaultValue="Ids"
      showSearch
      :allow-clear="true"
      @search="onSearch"
      @blur="onBlur"
      :field-names="{ label: 'description', value: 'resourceId' }"
      :option="dataList">
      <a-select-option
        v-for="(item, index) in dataList"
        :key="item.resourceId"
        :value="item.description"
        :label="item.resourceId">
        {{ showNames(item) }}
      </a-select-option>
    </a-select>
    <!-- <a-select v-model="form.resourceIdArr" placeholder="请选择接口资源" mode="multiple" :defaultValue="Ids"
            @change="change">
            <a-select-option v-for="item in dataList" :key="item.resourceId
                " :label="item.description" :value="item.resourceId">
                {{ item.description }}
            </a-select-option>
        </a-select> -->
  </a-spin>
</template>

<script>
// import { getResources } from '@/api/resource'
export default {
    name: 'PaginationSearchSelect',
    props: {
        placeholder: {
            type: String,
            default: '请选择访问资源',
            required: false
        },
        pageSize: {
            type: Number,
            default: 100,
            required: false
        },
        openSearch: {
            type: Boolean,
            default: false,
            required: false
        },
        value: {
            type: [String, Number],
            required: false
        },
        triggerChange: {
            type: Boolean,
            default: false,
            required: false
        },
        defaultId: {
            type: String,
            required: false,
            default: ''
        },
        // 多选或单选下拉
        typeMode: {
            type: String,
            required: false,
            default: ''
        }
    },
    data () {
        return {
            dataList: [],
            pageNo: 1,
            max: false,
            spinning: false,
            searchWorld: '',
            total: 0,
            Type: '',

            // defaultSelectId: '',
            // undefined 下拉提示文字需要为undefined才能显示
            resourceIdArr: undefined,
            resourceNameArr: [],
            Ids: [],
            form: {
                resourceIdArr: undefined
            }
        }
    },

    mounted () {
        // if (this.max) return
        // this.loadDatas()
    },
    methods: {
        init (par) {
            if (this.max) return
            this.loadDatas()
            if (par) {
                // this.resourceIdArr = par.resourceId
                // this.Type = par.resourceType
                if (par.relatedResources.length > 0) {
                    this.form.resourceIdArr = par.relatedResources.map(item => {
                        return item.resourceId
                    })
                    this.Ids = this.form.resourceIdArr
                    this.resourceNameArr = par.relatedResources.map(item => {
                        return item.description
                    })
                }
            }
        },
        loadDatas () {
            this.pageNo = 1
            var param = {
                current: this.pageNo,
                pageSize: this.pageSize,
                description: this.searchWorld,
                resourceType: this.Type
            }
            // this.listUrl,
            this.$getResources(param).then((res) => {
                if (res.code == 200) {
                    this.dataList = res.data.datas
                    this.total = res.data.total
                }
            })
        },
        showNames (item) {
            // var str = [];
            // this.showNameArr.forEach(element => {
            //     str.push(item[element]);
            // });
            // return str.join(' - ');

            return item.description
        },
        filterOption (input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        // 滚动条滚动监听方法
        async popupScroll (e) {
            const that = this
            const { target } = e
            const scrollHeight = target.scrollHeight - target.scrollTop // 滑动总高度
            const clientHeight = target.clientHeight // 滑动最低高度
            // 当下拉框滚动条到达底部的时候
            if (!this.max && scrollHeight < clientHeight + 2) {
                this.spinning = true
                // 数据起始条数
                this.pageNo++
                var newList = []
                var param = {
                    current: this.pageNo,
                    pageSize: this.pageSize,
                    description: this.searchWorld,
                    resourceType: this.Type
                }
                // this.listUrl,
                await this.$getResources(param).then((res) => {
                    if (res.code == 200) {
                        newList = res.data.datas
                        that.total = res.data.total
                        if (newList.length == 0) {
                            that.max = true
                        }
                    }
                })
                if (that.total != this.dataList.length) {
                    // 数据追加
                    this.dataList = this.dataList.concat(newList)
                }
                this.spinning = false
            }
        },
        // 下拉框搜索方法
        onSearch (val) {
            console.log(val)
            if (val.length != 0) {
                this.searchWorld = val
                this.dataList = []
                this.max = false
                this.loadDatas()
            } else {
                this.searchWorld = ''
                this.dataList = []
                this.max = false
                this.loadDatas()
            }
        },
        onBlur () {
            this.searchWorld = ''
            this.dataList = []
            this.max = false
            this.loadDatas()
        },
        change (val, option) {
            let arrId
            if (option == undefined) {
                arrId = option
            } else {
                if (option.length > 0) {
                    arrId = option.map(item => {
                        return item.key
                    })
                } else {
                    arrId = option.key
                }
            }

            // this.resourceIdArr = val
            // this.resourceNameArr=val
            this.form.resourceIdArr = arrId
            this.resourceNameArr = val
            this.Ids = val

            if (this.triggerChange) {
                this.$emit('change', arrId)
            } else {
                this.$emit('input', arrId)
            }
        }
    }
}
</script>

<style scoped>
.spin-content {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
}
</style>
